import { useMemo } from "react";
import { ConfigProvider } from "antd";
import { Route, Switch } from "react-router-dom";
import { useTranslation } from "react-i18next";

// 引入 antd 组件中的 语言包
import zhCN from "antd/locale/zh_CN";
import enUS from "antd/locale/en_US";

import AppLayout from "@/layout";
import Login from "@/views/login";

const App = () => {
  const { i18n } = useTranslation();

  // 使用 i18n.language 属性，来控制 ConfigProvider 的 locale
  const locale = useMemo(() => {
    return {
      zhCN: zhCN,
      enUS: enUS,
    }[i18n.language];
  }, [i18n.language]);

  return (
    <ConfigProvider
      theme={{
        token: {
          colorBgContainer: "#fff",
        },
      }}
      locale={locale}
    >
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/" component={AppLayout} />
      </Switch>
    </ConfigProvider>
  );
};

export default App;
